<script setup>
import { ref, onMounted } from 'vue'
import myAxios from '../../../plugins/myAxios.js'
import { ElMessage } from 'element-plus'

const feedbackList = ref([])

const dialogVisible = ref(false)
const newFeedback = ref({
  title: '',
  content: '',
  type: ''
})

const feedbackTypes = [
  { label: '功能建议', value: 1 },
  { label: '性能问题', value: 2 },
  { label: 'BUG反馈', value: 3 },
  { label: '其他', value: 4 }
]

// 获取反馈列表
const getFeedbackList = async () => {
  try {
    const data = await myAxios.get('/feedback/list/student')
    feedbackList.value = data
  } catch (error) {
    ElMessage.error('获取反馈列表失败')
  }
}

// 提交反馈
const submitFeedback = async () => {
  if (!newFeedback.value.title || !newFeedback.value.type || !newFeedback.value.content) {
    ElMessage.warning('请填写完整信息')
    return
  }

  try {
    await myAxios.post('/feedback/submit', newFeedback.value)
    ElMessage.success('提交成功')
    dialogVisible.value = false
    getFeedbackList() // 刷新列表
    // 重置表单
    newFeedback.value = {
      title: '',
      content: '',
      type: ''
    }
  } catch (error) {
    ElMessage.error('提交失败')
  }
}

// 查看反馈详情
const currentFeedback = ref(null)
const detailDialogVisible = ref(false)

const viewFeedbackDetail = async (id) => {
  try {
    const data = await myAxios.get(`/feedback/get?id=${id}`)
    currentFeedback.value = data
    detailDialogVisible.value = true
  } catch (error) {
    ElMessage.error('获取详情失败')
  }
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '待处理',
    1: '处理中',
    2: '已处理'
  }
  return statusMap[status] || '未知状态'
}

// 获取状态标签类型
const getStatusType = (status) => {
  const typeMap = {
    0: 'info',
    1: 'warning',
    2: 'success'
  }
  return typeMap[status] || 'info'
}

// 获取类型文本
const getTypeText = (type) => {
  const typeMap = {
    1: '功能建议',
    2: '性能问题',
    3: 'BUG反馈',
    4: '其他'
  }
  return typeMap[type] || '未知类型'
}

onMounted(() => {
  getFeedbackList()
})
</script>

<template>
  <div class="feedback-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>问题反馈</span>
          <el-button type="primary" @click="dialogVisible = true">提交反馈</el-button>
        </div>
      </template>

      <el-table :data="feedbackList" border style="width: 100%">
        <el-table-column prop="title" label="标题" width="180" />
        <el-table-column prop="type" label="类型" width="150">
          <template #default="scope">
            {{ getTypeText(scope.row.type) }}
          </template>
        </el-table-column>
        <el-table-column prop="content" label="反馈内容" width="300" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="提交时间" width="280" />
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button
              link
              type="primary"
              @click="viewFeedbackDetail(scope.row.id)"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
      v-model="dialogVisible"
      title="提交反馈"
      width="500px"
    >
      <el-form :model="newFeedback" label-width="100px">
        <el-form-item label="反馈标题">
          <el-input v-model="newFeedback.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="反馈类型">
          <el-select v-model="newFeedback.type" placeholder="请选择反馈类型">
            <el-option
              v-for="item in feedbackTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="反馈内容">
          <el-input
            v-model="newFeedback.content"
            type="textarea"
            rows="4"
            placeholder="请详细描述您的问题或建议"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitFeedback">提交</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
      v-model="detailDialogVisible"
      title="反馈详情"
      width="600px"
    >
      <div v-if="currentFeedback" class="feedback-detail">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="标题">
            {{ currentFeedback.title }}
          </el-descriptions-item>
          <el-descriptions-item label="类型">
            {{ getTypeText(currentFeedback.type) }}
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getStatusType(currentFeedback.status)">
              {{ getStatusText(currentFeedback.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="提交时间">
            {{ currentFeedback.createTime }}
          </el-descriptions-item>
          <el-descriptions-item label="反馈内容">
            <div class="content-box">
              {{ currentFeedback.content }}
            </div>
          </el-descriptions-item>
          <el-descriptions-item v-if="currentFeedback.reply" label="管理员回复">
            <div class="reply-box">
              {{ currentFeedback.reply }}
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
.feedback-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.feedback-detail {
  padding: 10px;
}

.content-box, .reply-box {
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 4px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
}

.reply-box {
  background-color: #e6f6ff;
}
</style>
